<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单练习</title>
		<!--引入外部第三方css文件
		.min意思最小文件，压缩，(把文件所有内容换行和空格缩进都去掉)文件相对较小
		120988英文文字格式-->
		
		<link rel="stylesheet" href="../css/bootstrap.min.css"/>
	</head>
	<body>
		<div class="container">
			<h3>学生信息管理系统</h3>
		<div class="form-group">
			<!--label标签 for属性光标，点击后可以对应的框-->
				<label for="name">姓名:</label>
				<!--文本输入框，h5新特性placeholder属性-->
				<input type = "text" name="name" id="name"
				placeholder="请输入姓名..."/>
			</div>
			<div class="form-group">
				<label for="age">年龄:</label>
				<input type="number" name="age" id="age" 
				placeholder="请输入年龄..."/>
			</div>
			<div class="form-group" >
				<label for="sex">性别:   (单选框)</label>
				<!--radio 互斥，同名会只能选一个-->
				<div class="radio-inline">
				<input  type ="radio" name="sex" id="sex" checked="checked" /> 男
				<div class="radio-inline">
				<input type="radio" name="sex" id="sex" />女
				</div>
				</div>
			</div>
			<div class="form-group">
				<label for="hobby">爱好:   (多选)</label>
				<div class="checkbox-inline">
				<input type="checkbox" checked="checked" name="hobby" id="hobby" /> 乒乓球
				</div>
				<div class="checkbox-inline">
				<input type="checkbox" name="hobby" id="hobby" />爬山
				</div>
				<div class="checkbox-inline">
				<input type="checkbox" name="hobby" id="hobby" />唱歌
				</div>
			</div>
			<div class="form-group" >
				<label>学历:    (下拉框)</label>
				<!--单选,选择"幼儿园",表单提交"1"性能高-->
				<select name="edu" id="edu">
					<option value="1">幼儿园</option>
					<option value="2">小学</option>
					<option value="3">初中</option>
					<option value="4">高中</option>
					<option value="5">大专</option>
					<option value="6" selected="selected">本科 </option>
					<option value="7">研究生</option>
					<option value="8">博士</option>
				</select>
			</div>
			<div class="form-group" >
				<!--class属性支持多个样式之间用空格隔开-->
				<input class="btn btn-primary"  type="button" name="submit" value="保存"/>
				<button class="btn btn-danger" name="clear">取消</button>
			</div>
			
		</div>
	</body>
</html>
